<style>
<!--
#toolBox {
	position:fixed;
	left:0;
	top:50px;
	
	/*
	border:3px;
	
    -moz-box-shadow: 0 0 5px #000000;
    -webkit-box-shadow: 0 0 5px #000000;
    box-shadow: 0 0 5px #000000;
*/
	width:80px;
	height:500px;
	padding:5px 10px;
}
#toolBox div.toolbar{
	cursor:pointer; 
	padding:5px;
	float:left;
	
}
#toolBox div.toolbar img{
	width:50px;
	height:50px;
	
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
    -moz-box-shadow: 0 0 5px #000000;
    -webkit-box-shadow: 0 0 5px #000000;
    box-shadow: 0 0 5px #000000;
    opacity:0.3;
}

#toolBox div.toolbar img.foucs{
	border:#35a5e5 1px solid;
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

-->
</style>

<div id="toolBox">
	<div id='controller'>
		
	</div>
	  <div id='sina' class='toolbar' jClass="Weibo" cnTitle="微博">
	    <?php echo CHtml::image('images/toolbar/weibo.png');?>
	  </div>
  
	<div id='text' class='toolbar' jClass="Text" cnTitle="文本">
		<?php echo CHtml::image('images/toolbar/text.png');?>
	</div>

	<div id='image' class='toolbar' jClass="Image"  cnTitle="图片">
		<?php echo CHtml::image('images/toolbar/image.png');?>
	</div>

	<div id='music' class='toolbar' jClass="Music"  cnTitle="音乐">
		<?php echo CHtml::image('images/toolbar/music.png');?>
	</div>

	<div id='card' class='toolbar' jClass="Card"  cnTitle="名片">
		<?php echo CHtml::image('images/toolbar/music.png');?>
	</div>

</div>

<script>
	$(function(){

		//panel.resize();
		//panel.drag();
		$('#toolBox div.toolbar img').attr('alt',"拖动到页面").attr('title',"拖动到页面")
		.mouseover(function(){
			$(this).parent().css({'background-color':'#ee'});
			if($(this).css('width') =='50px')
				$(this).animate({background:'#ddd',width:'80px',height:'80px',opacity:1,'background-color':'#307DCA'
								},500);
		}).mouseout(function(){
			$(this).animate({width:'50px',height:'50px',opacity:0.3,'background-color':'transparent'
							},500);
		});
    
    var pid={};
    var me=this;
    if($('#toolBox div.toolbar').attr('id')=='sina'){
      pid={pid:'P100'};
    }
    
    if($('#toolBox div.toolbar').attr('id')=='qq'){
      pid={pid:'P200'};
    }
    
		$('#toolBox div.toolbar').draggable({ revert: false, helper: "clone",
				stop:function(event,ui){ 
					
					var jClass = $(this).attr('jClass');

					var options = {isEdit:true,styles : $.extend({},{left:ui.position.left +'px',top:ui.position.top +'px'}),wbid:pid};
					
					eval("new "+jClass+"\(options\)");
				}

			})
		.click(function(){
			
			var jClass = $(this).attr('jClass');
			//alert(jClass);
			var title = $(this).attr('cnTitle');
			//alert(jClass+"||"+title);
			rnd=(new Date().getTime()) ^ Math.random();
			options = {classname:$(this).attr('jClass'),cntitle:title,widget_id:jClass+rnd,events:'create',styles : $.extend({},{left:'400px',top:'200px',width:'150px',height:'150px'}),wbid:pid};
			//eval("var widget=new Widget"+"\(jClass \)");
			var rnd=(new Date().getTime()) ^ Math.random();

			var className=$(this).attr('jClass'); 
		var style={
			wid:className+rnd,
			font:"italic bold 12px/20px arial,sans-serif",
			color:'#00ff00',
			width:'150px',
			height:'100px',
			left:'300px',
			top:'200px',
			background: '#00FF00 no-repeat fixed top',
			border:'0px',
			position:'absolute',
			z_index:null,
			opacity:100
			};	 

		var attribute={
			wid:className+rnd,
			weiboId:null,
			bg_pid:null,
			uid:null,
			icon_pid:null,
			text:null,
		};
			

		var jwidget={wid:className+rnd,
					 classname:className,
					 cntitle:'文本',
					 viewperm:0,
					 cmtperm:0,
					 tranperm:0,
					 trandate:null,
					 orig_wid:null,
					 style:style,
					 attribute:attribute,
					 events:'create'};	
					 			 
		jwidgets.push(jwidget);		 		
			 if(jClass=='Card'){
			 	$('body').load(JWidgetOption.panelUrl+"/loadTest",{'widgets':jwidgets});
			 }
		var widget=new Widget(jwidget);	
			widget.load(jwidget);
			
			//eval("var jwidget=new J"+jClass+"Widget"+"\(options \)");
			//alert(joptions.classname);
			//alert(joptions.widget_id);
			//alert(joptions.cntitle);
			
			// wPanel.add(jwidget);
			
			wPanel.add(jwidget);
		});
	});
</script>